import { ArrowLeftRight } from 'lucide-react';
import { ScrollX } from '@/components/models/scroll-x';
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { ComparabilityBadge, TrustBadge } from '@/components/models/badges';
import { fmtScoreUnit } from '@/components/models/shared';
import { Chip, EntityBadge } from '@/components/ui/badges';
import { DataTable, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { ApiError, apiD1, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtDate, fmtInt, fmtTokens, fmtUsdPerM, fmtValue, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { DiffDelta, ModelDiffPayload } from '@/lib/types';

/*
  /models/[a]/diff/[b] — only the dimensions whose observed values differ, with deltas: context 200K → 1M (+400%), price −34%,
  benchmark ± points (comparable groups only), capability lists as added / removed. Shareable; linked from /compare.
*/

type Params = { params: Promise<{ slug: string; b: string }> };
export const revalidate = 300;

async function load(a: string, b: string): Promise<{ res: ModelDiffPayload | null; error: string | null }> {
  try {
    return { res: await apiD1.modelDiff(a, b), error: null };
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    if (e instanceof ApiError && (e.status === 400 || e.status === 422)) return { res: null, error: e.detail ?? 'These two entities cannot be diffed.' };
    return { res: null, error: null };
  }
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug, b } = await params;
  const res = await safe(apiD1.modelDiff(slug, b));
  const canonical = `/models/${encodeURIComponent(slug)}/diff/${encodeURIComponent(b)}`;
  if (!res) return { title: 'Model diff', robots: { index: false }, alternates: { canonical } };
  const title = `${res.a.name} vs ${res.b.name} — what differs`;
  const description = `${res.dimensions.length} differing dimensions between ${res.a.name} and ${res.b.name}: context, prices, benchmarks (comparable groups only), capabilities — each value with its source. ${SITE_NAME}.`;
  return { title, description, alternates: { canonical }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${canonical}`, type: 'article' } };
}

function isNumDelta(d: DiffDelta): d is { absolute: number; percent: number | null } {
  return !!d && 'absolute' in d;
}
function isListDelta(d: DiffDelta): d is { added: unknown[]; removed: unknown[] } {
  return !!d && 'added' in d;
}

function cell(kind: string, key: string, v: unknown, unit?: string): string {
  if (v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) return 'Unavailable';
  if (kind === 'date') return fmtDate(String(v));
  if (kind === 'bool') return v ? 'Yes' : 'No';
  if (kind === 'list') return (Array.isArray(v) ? v : [v]).map(String).join(', ');
  if (kind === 'number') {
    if (/per_mtok/.test(key)) return fmtUsdPerM(v);
    if (key.startsWith('bench:')) return fmtScoreUnit(num(v), unit ?? null);
    if (/context_length|max_output_tokens/.test(key)) return fmtTokens(v);
    return fmtValue(v, key);
  }
  return typeof v === 'string' ? v : fmtValue(v, key);
}

/** "+39 days" / "−2 months" between two ISO dates (month precision when either date is YYYY-MM). */
function dayDelta(a: string, b: string): string {
  const monthly = a.length <= 7 || b.length <= 7;
  const ta = new Date(a.length === 7 ? `${a}-01` : a.length === 4 ? `${a}-01-01` : a).getTime();
  const tb = new Date(b.length === 7 ? `${b}-01` : b.length === 4 ? `${b}-01-01` : b).getTime();
  if (!Number.isFinite(ta) || !Number.isFinite(tb)) return 'differs';
  const days = Math.round((tb - ta) / 86400000);
  const sign = days > 0 ? '+' : '−';
  const abs = Math.abs(days);
  if (monthly || abs >= 90) {
    const months = Math.round(abs / 30.44);
    return `${sign}${months} month${months === 1 ? '' : 's'}`;
  }
  return `${sign}${abs} day${abs === 1 ? '' : 's'}`;
}

function fmtPct(p: number | null): string | null {
  if (p === null || !Number.isFinite(p)) return null;
  const sign = p > 0 ? '+' : p < 0 ? '−' : '';
  const abs = Math.abs(p);
  return `${sign}${abs >= 100 ? abs.toFixed(0) : abs.toFixed(abs < 10 ? 1 : 0)}%`;
}

export default async function ModelDiffPage({ params }: Params) {
  const { slug, b } = await params;
  const { res, error } = await load(slug, b);
  const canonical = `/models/${encodeURIComponent(slug)}/diff/${encodeURIComponent(b)}`;
  if (!res)
    return (
      <Container>
        <PageHeader eyebrow="Model diff" title="What differs" />
        <div className="pb-16">{error ? <EmptyState title="These two entities cannot be diffed">{error}</EmptyState> : <Unavailable what="Model diff" reason="The API did not answer. Try again in a moment." />}</div>
      </Container>
    );
  const attr = res.dimensions.filter((d) => d.source !== 'results' && d.source !== 'prices');
  const prices = res.dimensions.filter((d) => d.source === 'prices');
  const bench = res.dimensions.filter((d) => d.source === 'results');
  const lists = res.dimensions.filter((d) => isListDelta(d.delta));
  const ld = { '@context': 'https://schema.org', '@type': 'Dataset', name: `${res.a.name} vs ${res.b.name} — differences`, url: `${SITE_URL}${canonical}`, description: res.note ?? undefined, about: [res.a, res.b].map((e) => ({ '@type': 'SoftwareApplication', name: e.name, url: `${SITE_URL}${routes.entity(e)}` })) };

  const Row = ({ d }: { d: ModelDiffPayload['dimensions'][number] }) => {
    const comp = res.comparability?.[d.key];
    const nd = isNumDelta(d.delta) ? d.delta : null;
    const better = nd && d.kind === 'number' ? (d.source === 'prices' ? nd.absolute < 0 : (d.higher_is_better ?? true) ? nd.absolute > 0 : nd.absolute < 0) : null;
    return (
      <tr>
        <Td primary className="align-top">
          {d.key.startsWith('bench:') && d.benchmark ? (
            <Link href={routes.benchmark(d.benchmark) + (d.metric && d.config_key ? `?metric=${encodeURIComponent(d.metric)}&config_key=${encodeURIComponent(d.config_key)}` : '')} className="text-ink hover:text-accent hover:underline">
              {d.label.split(' · ')[0]}
            </Link>
          ) : (
            d.label
          )}
          <span className="block text-[11px] text-ink-3">
            {d.key.startsWith('bench:') ? d.label.split(' · ').slice(1).join(' · ') : d.unit}
          </span>
          {comp && (
            <span className="mt-0.5 flex flex-wrap items-center gap-1">
              <ComparabilityBadge level={comp.level} reasons={comp.reasons} />
              {comp.trust?.[res.a.id] && <TrustBadge level={comp.trust[res.a.id]?.level} label={comp.trust[res.a.id]?.label} />}
            </span>
          )}
        </Td>
        <Td label={res.a.name} className="tnum align-top">
          {cell(d.kind, d.key, d.a, d.unit)}
        </Td>
        <Td label={res.b.name} className="tnum align-top">
          {cell(d.kind, d.key, d.b, d.unit)}
        </Td>
        <Td label="Delta (b − a)" className="tnum align-top">
          {nd ? (
            <span className={cn('font-medium', better === true && 'text-positive', better === false && 'text-danger')}>
              {d.source === 'prices' ? `${nd.absolute > 0 ? '+' : '−'}${fmtUsdPerM(Math.abs(nd.absolute))}` : d.key.startsWith('bench:') ? `${nd.absolute > 0 ? '+' : '−'}${Math.abs(nd.absolute).toFixed(Math.abs(nd.absolute) < 10 ? 2 : 1)}${d.unit === '%' ? ' pt' : ''}` : `${nd.absolute > 0 ? '+' : '−'}${fmtValue(Math.abs(nd.absolute), d.key)}`}
              {fmtPct(nd.percent) && <span className="ml-1.5 text-xs font-normal text-ink-3">{fmtPct(nd.percent)}</span>}
            </span>
          ) : isListDelta(d.delta) ? (
            <span className="flex flex-wrap gap-1">
              {d.delta.added.map((x) => (
                <Chip key={`+${String(x)}`} className="text-positive bg-positive-soft">
                  + {String(x)}
                </Chip>
              ))}
              {d.delta.removed.map((x) => (
                <Chip key={`-${String(x)}`} className="text-danger bg-danger-soft">
                  − {String(x)}
                </Chip>
              ))}
            </span>
          ) : d.kind === 'date' && typeof d.a === 'string' && typeof d.b === 'string' ? (
            <span className="tnum text-ink-2">{dayDelta(d.a, d.b)}</span>
          ) : (
            <span className="text-ink-3">differs</span>
          )}
        </Td>
      </tr>
    );
  };
  const Table = ({ rows, caption }: { rows: ModelDiffPayload['dimensions']; caption: string }) => (
    <ScrollX><DataTable caption={caption} compact>
      <thead>
        <tr>
          <Th>Dimension</Th>
          <Th>{res.a.name}</Th>
          <Th>{res.b.name}</Th>
          <Th>Delta (b − a)</Th>
        </tr>
      </thead>
      <tbody>
        {rows.map((d) => (
          <Row key={d.key} d={d} />
        ))}
      </tbody>
    </DataTable></ScrollX>
  );

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <PageHeader
        eyebrow={
          <>
            <span>Model diff</span>
            <EntityBadge type="model" small />
          </>
        }
        title={
          <>
            {res.a.name} <span className="text-ink-3">vs</span> {res.b.name}
          </>
        }
        lede={`${fmtInt(res.dimensions.length)} dimensions differ. ${res.note ?? 'Only dimensions with differing observed values are listed; numeric delta = (b − a) / a.'}`}
        aside={
          <div className="flex flex-wrap gap-2 text-sm">
            <Link href={`/models/${encodeURIComponent(res.b.slug)}/diff/${encodeURIComponent(res.a.slug)}`} className="inline-flex h-9 items-center gap-1.5 border border-rule px-2.5 text-ink-2 hover:border-rule-strong hover:text-ink">
              <ArrowLeftRight className="size-3.5" aria-hidden /> Swap
            </Link>
            <Link href={routes.compare([res.a.slug, res.b.slug])} className="inline-flex h-9 items-center bg-ink px-3 font-medium text-canvas hover:opacity-90">
              Full comparison →
            </Link>
          </div>
        }
      >
        <p className="mt-4 flex flex-wrap gap-x-6 gap-y-1 text-sm text-ink-2">
          <span>
            a · <EntityLink e={res.a} className="font-medium" /> {res.a.organization && <span className="text-ink-3">{res.a.organization.name}</span>}
          </span>
          <span>
            b · <EntityLink e={res.b} className="font-medium" /> {res.b.organization && <span className="text-ink-3">{res.b.organization.name}</span>}
          </span>
        </p>
      </PageHeader>
      <div className="space-y-10 pb-16">
        {res.dimensions.length === 0 && <EmptyState title="No recorded difference">Every observed dimension has the same value for both models — or neither has a value.</EmptyState>}
        {attr.length > 0 && (
          <section>
            <p className="eyebrow mb-2">
              Specification & capabilities <span className="tnum text-ink-3">{attr.length}</span>
            </p>
            <Table rows={attr} caption="Differing specification dimensions" />
          </section>
        )}
        {prices.length > 0 && (
          <section>
            <p className="eyebrow mb-2">
              Pricing <span className="tnum text-ink-3">{prices.length}</span>
            </p>
            <Table rows={prices} caption="Differing price dimensions" />
            <Note className="mt-2">Best (cheapest) current offer across providers, USD per 1M tokens. A negative delta means b is cheaper.</Note>
          </section>
        )}
        {bench.length > 0 && (
          <section>
            <p className="eyebrow mb-2">
              Benchmarks <span className="tnum text-ink-3">{bench.length}</span>
            </p>
            <Table rows={bench} caption="Differing benchmark scores" />
            <Note className="mt-2">Only comparability groups where both models have a current result. Partially comparable = same task, conditions (effort, temperature, judge) differ. Not a verdict.</Note>
          </section>
        )}
        {lists.length > 0 && <Note>List dimensions ({lists.map((l) => l.label).join(', ')}) show elements added (+) and removed (−) going from a to b.</Note>}
      </div>
    </Container>
  );
}